import { Col, Flex } from 'antd';
import React from 'react';

import woman from '@/assets/p_woman.png';
import CountUp from 'react-countup';
import { useIntl } from 'umi';
import { customer, manager } from './data';
import './index.less';
type IProps = {
  xScoreAmount: number;
};
const TopInfo: React.FC<IProps> = ({ xScoreAmount }) => {
  const intl = useIntl();
  const isEn = intl.locale == 'en-US';

  return (
    <Flex align="center" gap={isEn ? 48 : 78}>
      <div style={{ display: 'flex', position: 'relative', marginLeft: 175 }}>
        <img
          src={woman}
          className="tabsContent_right_left_woman"
          style={{ position: 'absolute', left: -149, top: -25, zIndex: 1 }}
          width={170}
        />
        <div className="tabsContent_right" style={{ minWidth: isEn ? 285 : 335 }}>
          <div className="tabsContent_right_bg" />
          <div className="tabsContent_right_left">
            <Col style={{ color: '#fff', fontSize: 16 }}>
              {intl.formatMessage({ id: 'home.ai' })}
              {isEn ? <div> {intl.formatMessage({ id: 'home.ai1' })}</div> : null}
            </Col>
            <Col
              style={{
                fontSize: 30,
                color: '#fff',
                fontWeight: 700,
                marginTop: 6,
              }}
            >
              <span style={{ marginRight: 4, fontSize: 26 }}>$</span>
              {xScoreAmount ? <CountUp separator="," end={xScoreAmount} /> : '- - -'}
            </Col>
          </div>
        </div>

        <div className="tabsContent_right_woman_bg" />
      </div>
      <div>
        <div
          style={{
            color: '#fff',

            lineHeight: isEn ? '17px' : '27px',
            letterSpacing: '0.03em',
          }}
        >
          <div style={{ lineHeight: '26px', fontSize: isEn ? 12 : 14, marginBottom: isEn ? 5 : 0 }}>
            {intl.formatMessage(
              { id: 'home.loan_way' },
              {
                num: <span style={{ marginRight: isEn ? 8 : 0 }}>{customer}</span>,
                total: manager,
              },
            )}
          </div>

          <div style={{ fontSize: isEn ? 13 : 14 }}>
            {intl.formatMessage({ id: 'home.remand' })}
          </div>
        </div>
      </div>
    </Flex>
  );
};

export default TopInfo;
